<template>
  <view
    class="panda-container"
    :style="{ backgroundImage: `url(${oss2('panda/detail/bg.png')})` }"
  >
    <!--  返回上一级  -->
    <image
      class="w-67px h-23px mb-18px"
      :src="oss2('panda/detail/prev_page.png')"
      @click.stop="backPrevPage"
    />
    <image
      class="w-full h-87px mb-12px"
      :src="oss2('panda/detail/title.png')"
    />
    <image
      class="w-full h-76px mx-auto"
      :src="oss2('panda/detail/part1_title.png')"
    />
    <view
      class="w-375px h-198px cover flex items-start justify-center"
      :style="{ backgroundImage: `url(${oss2('panda/detail/video_box.png')})` }"
    >
      <!--      <image class="w-60px h-60px absolute z-10" :src="oss2('panda/detail/video_play.png')" />-->
      <swiper
        class="w-314px h-207px video-swiper"
        :indicator-dots="true"
        indicator-color="#fff"
        indicator-active-color="#1764C2"
        @animationfinish="VideoChange"
      >
        <swiper-item v-for="({ path }, index) in videos" :key="index">
          <video class="w-314px h-176px" :src="path" />
        </swiper-item>
      </swiper>
    </view>
    <image
      class="w-full h-76px mx-auto mt-37px mb-13px"
      :src="oss2('panda/detail/part2_title.png')"
    />
    <view>
      <panda-pic-swiper :urls="swiperImages[0]" :name="'top'" />
    </view>
    <view class="pt-25px">
      <panda-pic-swiper :urls="swiperImages[1]" :name="'bottom'" />
    </view>
    <image
      class="w-32px h-32px fixed right-22px bottom-36px z-99"
      :src="oss2('panda/detail/up.png')"
      @click.stop="backTop"
    />
  </view>
</template>

<script setup>
import { oss2 } from "@/utils/utils";
import PandaPicSwiper from "@/components/panda-pic-swiper";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";

let enterTime = "";
let outTime = "";
let stayTime = "";

onLoad(async (options) => {});

onShow(() => {
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_second_page",
    "view",
    "seconda_page",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_second_page",
    "view",
    "seconda_page",
    stayTime
  );
});

const videos = [
  { path: oss2("panda/video/panda_video1.mp4") },
  { path: oss2("panda/video/panda_video2.mp4") },
];

const swiperImages = [
  [
    oss2("panda/img1/panda_img1_1.jpg"),
    oss2("panda/img1/panda_img1_2.jpg"),
    oss2("panda/img1/panda_img1_3.jpg"),
  ],
  [
    oss2("panda/img2/panda_img2_1.jpg"),
    oss2("panda/img2/panda_img2_2.jpg"),
    oss2("panda/img2/panda_img2_3.JPG"),
    oss2("panda/img2/panda_img2_4.jpg"),
    oss2("panda/img2/panda_img2_5.jpg"),
    oss2("panda/img2/panda_img2_6.jpg"),
    oss2("panda/img2/panda_img2_7.jpg"),
    oss2("panda/img2/panda_img2_8.jpg"),
    oss2("panda/img2/panda_img2_9.jpg"),
    oss2("panda/img2/panda_img2_10.jpg"),
    oss2("panda/img2/panda_img2_11.jpg"),
    oss2("panda/img2/panda_img2_12.jpg"),
    oss2("panda/img2/panda_img2_13.jpg"),
    oss2("panda/img2/panda_img2_14.jpg"),
  ],
];

const VideoChange = (e) => {
  console.log(
    videos[e.target.current].path.split("/")[
      videos[e.target.current].path.split("/").length - 1
    ]
  );
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_second_page",
    "slide",
    `vedio_${
      videos[e.target.current].path.split("/")[
        videos[e.target.current].path.split("/").length - 1
      ]
    }`,
    ""
  );
};

const backPrevPage = () => {
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_second_page",
    "click",
    "return_previous_page",
    ""
  );
  uni.navigateBack({ delta: 1 });
};

const backTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
  });
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_second_page",
    "click",
    "lower_right_corner",
    ""
  );
};
</script>

<style lang="less" scoped>
.panda-container {
  width: 100%;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 100%;
  padding: 7px 0;
  padding-bottom: 113px;
  image {
    display: block;
  }
}
.video-swiper {
  padding-top: 22rpx;
  swiper-item {
    box-sizing: border-box;
  }
}
</style>
